<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-测试姓名得分</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
        </style>
    </head>
    <body>
       <div>
           <input type="text" placeholder="请输入您的姓名" id="inputName">
           <button onclick="capScore()">得分</button>
       </div>
       <div id="ret"></div>

       <script>
            let names = [];
            let scores = [];
            function capScore(){
                // 获取输入的姓名
                let name = inputName.value;

                // 查询此姓名是否已测试
                let idx = names.indexOf(name);
                let score = 100; 
                if( idx == -1 ){  // 不存在
                    names.push(name);

                    // 随机产生一个分数
                    score = parseInt(Math.random() * (100-85+1) + 85);
                    scores.push(score); // 将分数添加数组中
                }else{
                     // 存在, 提取得分
                     score = scores[idx]; 
                }
                if(score >= 95){
                    ret.innerHTML = "<h3 style='color: red;'>"+ score + "</h3>";
                }else if(score >= 90){
                    ret.innerHTML = "<h3 style='color: blue;'>"+ score + "</h3>";
                }else{
                    ret.innerHTML = "<h3 style='color: lightred;'>"+ score + "</h3>";
                }
                
            }
       </script>
    </body>
</html>
